<template>
  
    <div>

      <el-row >
           <el-col :span="24">
            <el-form   class="demo-form-inline">
              <el-form-item >
                  <el-input  placeholder="请输入商品名称" v-model="goodName" style="float:left;width:300px;margin-left:200px"></el-input>
                  <el-button icon="el-icon-search"  type="primary"  style="float:left" @click="doSearchBtn"></el-button>
                  <el-button icon="el-icon-plus" circle style="margin-left:700px" type="danger" @click="doAdd"></el-button>新增商品
               </el-form-item>
                 </el-form>
                 
           </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
    :data="tableData"
    border
    style="width: auto;">
    <el-table-column
      type="index"
      label="序号"
      align="center"
      width="50"
    ></el-table-column>
    <el-table-column
      prop="goodName"
      label="商品名称"
      width="180"
      align="center"
      >
    </el-table-column>
    <el-table-column
      label="图片"
      align="center">
      <template slot-scope="scope">
        <img :src="scope.row.goodImg" style="width:200px;heigth:250px">
      </template>
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      align="center"
      width="180">
    </el-table-column>
    <el-table-column
      prop="count"
      label="库存"
      align="center"
      width="180">
    </el-table-column>
    <el-table-column
    label="商品状态"
    align="center"
    width="200">
    <template slot-scope="scope">{{ scope.row.state==1? '未上架':'已上架' }}</template>
    </el-table-column>
    <el-table-column
    label="操作"
    align="center"
    width="500">
    <el-button type="primary">修改信息</el-button>
    <template slot-scope="scope">
      <el-button type="primary" @click="doUpdate(scope.row)">修改信息</el-button>
      <el-button v-if="scope.row.state==1" type="primary" @click="doUp(scope.row.id)">上架</el-button>
      <el-button v-if="scope.row.state==2" type="warning" @click="doDown(scope.row.id)">下架</el-button>
    </template>
    </el-table-column>
  </el-table>
      </el-col>
    </el-row>
   

   
  <el-row>
           <el-col :span="24" :offset="6">
            <el-pagination
              
              background
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="pageNum"
              :page-sizes="[3, 6, 9]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
            </el-col>
        </el-row>


        <el-dialog  title="新增商品" :visible.sync="dialogFormVisible" >
    <el-row>
      <el-col :span="10" >
        <el-form :model="dialogform">
          <el-form-item label="商品名称:" label-width="80px">
             <el-input v-model="dialogform.goodName"></el-input>
           </el-form-item>
          <el-form-item label="图片:" label-width="80px">
            
            <el-upload
            class="upload-demo"
            action="/api/uploadimg"
            :headers="headers"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
            :on-success="handleAvatarSuccess">
            <el-button size="small" type="primary" v-if="fileList.length==0">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          </el-form-item>
          <el-form-item label="价格:" label-width="80px">
            <el-input v-model="dialogform.price"></el-input>
          </el-form-item>
          <el-form-item label="数量:" label-width="80px">
            <el-input v-model="dialogform.count"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="doSave">确 定</el-button>
  </div>
  </el-dialog>

  <el-dialog  title="修改商品" :visible.sync="dialogFormVisibleUpdate" >
    <el-row>
      <el-col :span="10" >
        <el-form :model="dialogformGood">
          <el-form-item label="商品名称:" label-width="80px">
             <el-input v-model="dialogformGood.goodName"></el-input>
           </el-form-item>
          <el-form-item label="图片:" label-width="80px">
            <img :src="dialogformGood.goodImg" style="width:100px;heigth:150px">
            <el-upload
            class="upload-demo"
            action="/api/uploadimg"
            :headers="headers"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList1"
            list-type="picture"
            :on-success="handleAvatarSuccessUpdate">
            <el-button size="small" type="primary" >点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          </el-form-item>
          <el-form-item label="价格:" label-width="80px">
            <el-input v-model="dialogformGood.price"></el-input>
          </el-form-item>
          <el-form-item label="数量:" label-width="80px">
            <el-input v-model="dialogformGood.count"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
    <el-button type="primary" @click="doSaveUpdate">确 定</el-button>
  </div>
  </el-dialog>
        
  </div>

 
</template>
  <script>
  export default {
      data(){
        return{
          dialogFormVisibleUpdate:false,
          fileList:[],
          headers:{
          'jwt':localStorage.getItem('jwt')
        },
          tableData:[],
          pageNum:1,
          pageSize:3,
          goodName:'',
          state:0,
          total:0,
          dialogFormVisible:false,
          dialogform:{
            goodName:'',
            goodImg:'',
            price:'',
            count:'',
            state:2
          },
          dialogformGood:{
            id:'',
            goodName:'',
            price:'',
            count:'',
            state:'',
            goodImg:''
          },
          fileList1:[]
        }
      },
      created(){
    
        this.getShopList()

      },
      methods:{
        doUpdate(row){
          this.fileList1 = []
          this.dialogFormVisibleUpdate = true
          this.dialogformGood.id = row.id
          this.dialogformGood.goodName = row.goodName
          this.dialogformGood.price = row.price
          this.dialogformGood.count = row.count
          this.dialogformGood.state = row.state
          this.dialogformGood.goodImg = row.goodImg
        },
        handleAvatarSuccessUpdate(res, file){
          console.log(res)
          this.dialogformGood.goodImg = res.msg
        },
        doSaveUpdate(){
            this.$axios.post('api/platformShop/updateGood',this.dialogformGood,{headers:{'jwt':localStorage.getItem('jwt')}})
            .then(res =>{
              this.dialogFormVisibleUpdate = false
              if(res.data.code ==200){
                this.$message({
                message:'修改成功',
                type:'success'
              })
              this.getShopList()
              this.fileList1=[]
              }else{
                this.$message({
                message:'修改失败',
                type:'error'
              })
              }
            })
        },
        doUp(goodId){
          let param = {}
          param.state = 2
          param.id = goodId
          this.$axios.post('/api/platformShop/updateGood',param,{headers:{'jwt':localStorage.getItem('jwt')}})
          .then(res =>{
            if(res.data.code==200){
              this.$message({
                message:'上架成功',
                type:'success'
              })
              this.getShopList()
            }else{
              this.$message({
                message:'修改失败',
                type:'error'
              })
            }
          })
        },
        doDown(goodId){
          let param = {}
          param.state = 1
          param.id = goodId
          this.$axios.post('/api/platformShop/updateGood',param,{headers:{'jwt':localStorage.getItem('jwt')}})
          .then(res =>{
            if(res.data.code==200){
              this.$message({
                message:'下架成功',
                type:'success'
              })
              this.getShopList()
            }else{
              this.$message({
                message:'修改失败',
                type:'error'
              })
            }
          })
        },
        handleAvatarSuccess(res, file){
          console.log(res)
          this.dialogform.goodImg = res.msg
      },
        handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
        doSave(){
          this.$axios.post('api/platformShop/insertGood',this.dialogform,{headers:{'jwt':localStorage.getItem('jwt')}})
          .then(res =>{
            if(res.data.code==200){
              this.dialogFormVisible = false
              this.$message({
                message:'新增成功',
                type:'success'
              })
              this.pageNum = 1
              this.getShopList()
              this.fileList=[]
            }else{
              this.$message({
                message:'新增失败',
                type:'error'
              })
            }
          })
        },
        doSearchBtn(){
        this.pageNum = 1
        this.getShopList()
      },
        doAdd(){
          this.dialogFormVisible = true
        },
        currentChange(p){
          this.pageNum=p
        this.getShopList()
        },
        sizeChange(p){
          this.pageNum=1
          this.pageSize=p
          this.getShopList()
        },
        getShopList(){
          let param = {};
        param.pageNum = this.pageNum;
        param.pageSize = this.pageSize;
        let data = {};
        data.goodName = this.goodName;
        data.state = this.state
        param.data = data;
            this.$axios.post('api/platformShop/queryGood',param,{headers:{'jwt':localStorage.getItem('jwt')}})
            .then(res =>{
              console.log(res.data)
              let pageDate = res.data.data
              this.tableData = pageDate.list
              this.pageNum = pageDate.pageNum
              this.pageSize = pageDate.pageSize
              this.total = pageDate.total
            })
        }
      }
     
  }
  </script>
  <style scoped>

  
  </style>